<template>
  <div class="post-container-postList-real">
    <div class="container-title">
      <span>{{ datas.title }}</span>
    </div>
    <div class="moudule-parse">
      <div class="module">
        <div>
          {{ "来自板块: " }}<span style="color: #fa0">{{ moduleName }}</span>
        </div>
      </div>
      <div class="parse">
        <div class="parse-container">
          <div class="icon">
            <i class="el-icon-view"></i>
            <span>{{ "  " + countDTO.readTotal }}</span>
          </div>
          <div class="icon">
            <i class="el-icon-chat-dot-round"></i>
            <span>{{ "  " + countDTO.commentTotal }}</span>
          </div>
          <div class="icon">
            <i class="el-icon-star-off"></i>
            <span>{{ "  " + countDTO.collectTotal }}</span>
          </div>
          <div class="icon">
            <i class="el-icon-s-opportunity"></i>
            <span>{{ "  " + countDTO.likeTotal }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="post-time">发布时间：{{ createTime }}</div>
    <div class="editor-container">
      <div v-html="postDetail" class="editor-content"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "sourceContainer",
  props: {
    // 帖子数据
    postData: {
      require: true,
    },
    // 帖子全部数据
    datas: {
      require: true,
    },
    countDTO: {
      require: true,
    },
    mouduleId: {
      require: true,
    },
  },
  data() {
    return {
      moduleName: undefined,
      // 发布时间
      createTime: undefined,
      // 帖子主体内容
      postDetail: undefined,
    };
  },
  mounted() {
    this.getDicts("szpt_nav_status").then((response) => {
      // 初始化菜单
      setTimeout(() => {
        response.data.forEach((item) => {
          if (item.dictCode === this.$props.mouduleId) {
            this.moduleName = item.remark;
          }
        });
      }, 800);
    });
    setTimeout(() => {
      this.createTime = this.$props.datas.createTime;
      this.postDetail = this.$props.datas.remark;
    }, 500);
  },
};
</script>

<style lang="scss">
.post-container-postList-real {
  height: auto;
  background-color: rgb(255, 255, 255);
  padding: 30px;
  .container-title {
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-weight: bold;
    font-size: 25px;
    line-height: 30px;
    word-break: break-all;
    word-wrap: break-word;
  }
  .moudule-parse {
    margin-top: 10px;
    height: 30px;
    line-height: 30px;
    display: flex;
    font-size: 14px;
    color: #999;
    background-color: #f7f8fc;
    .module {
      width: 40%;
      justify-self: flex-start;
    }
    .parse {
      width: 60%;
      .parse-container {
        display: flex;
        justify-content: flex-end;
        .icon {
          margin-right: 20px;
        }
      }
    }
  }
  .post-time {
    width: 100%;
    height: 20px;
    color: #999;
    font-size: 14px;
    margin-top: 10px;
    text-align: center;
  }
  .editor-container {
    width: 100%;
    height: auto;
    margin-top: 10px;
    padding: 3px;
    overflow: hidden;
    background-color: #f7f8fc;
    img {
      max-width: 100%;
      height: auto;
    }
  }
}
</style>
